<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>CHOOSE FOOD</title>
<link rel="stylesheet" href="../../css/bootstrap/bootstrap.css"
	th:href="@{/css/bootstrap/bootstrap.css}" />
<script src="../../js/jquery-1.11.2.js" th:src="@{/js/jquery-1.11.2.js}"></script>
<script src="../../js/client.js" th:src="@{/js/client.js}"></script>
</head>
<body>
	<header></header>
	<nav class="navbar navbar-default col-md-offset-1 col-md-10 container"
		style="background-color: red;">
		<div class="container-fluid">
			<ul class="nav navbar-nav">
				<li><a href="#">1. Chọn khu vực</a></li>
				<li><a href="#">2. Chọn nhà hàng</a></li>
				<li><a href="#" style="color: yellow;">3. Chọn thức ăn</a></li>
				<li><a href="#">4. Xác nhận đơn hàng</a></li>
			</ul>
		</div>
	</nav>
	<section class="col-md-offset-1 col-md-10">
		<article>
			<div class="row">
				<div class="col-md-9">
					<div class="row">
						<div class="col-md-4">
							<img th:src="${restaurant.restaurantImage}" />
						</div>
						<div class="col-md-4">
							<h5 th:text="${restaurant.restaurantName}"></h5>
							<h5 th:text="${restaurant.restaurantTitle}"></h5>
						</div>
						<div class="col-md-4">
							<h5 th:text="${restaurant.wardName}"></h5>
							<p>
								<span th:text="${restaurant.districtName}"></span><span>,
								</span><span th:text="${restaurant.cityName}"></span>
							</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3">
							<p style="font-size: 18px; color: blue; margin-top: 25px;">Danh muc:</p>
							<div th:each="m : ${menu}" style="border-bottom: 1px solid yellow;">
								<p th:text="${m}" style="color: red;"></p>
							</div>
						</div>
						<div th:unless="${#lists.isEmpty(listFood)}" class="col-md-9">
							<table class="table table-hover">
								<tbody>
									<tr th:each="lif : ${listFood}">
										<td>
											<table class="table table-hover">
												<tbody>
													<tr>
														<td th:text="${lif.menuFoodName}"
															style="font-size: 20px; color: #3559B5; padding: 6px 0px;"></td>
													</tr>
													<tr th:each="f : ${lif.listFoodDto}">
														<td><img th:src="${f.foodImage}" /></td>
														<td th:text="${f.foodName}"></td>
														<td>
															<div>
																<span th:text="${f.oldPrice}"></span><input type="image"
																	src="../../img/add.png" th:src="@{/img/add.png}"
																	th:onclick="'javascript:chooseFoods(\'' + ${restaurant.restaurantId} + '\', \'' + ${f.foodId} + '\', \'' + ${f.foodName} + '\', \'' + ${f.oldPrice} + '\', \'' + ${restaurant.deliveryPrice} + '\', \'' + ${restaurant.minOrder} + '\');'" />
															</div>
														</td>
													</tr>
												</tbody>
											</table>
										</td>
									</tr>
									<tr th:each="lid : ${listDrink}">
										<td>
											<table class="table table-hover">
												<tbody>
													<tr>
														<td th:text="${lid.menuDrinkName}"
															style="font-size: 20px; color: #3559B5; padding: 6px 0px;"></td>
													</tr>
													<tr th:each="d : ${lid.listDrinkDto}">
														<td><img th:src="${d.drinkImage}" alt="" /></td>
														<td th:text="${d.drinkName}"></td>
														<td>
															<div>
																<span th:text="${d.oldPrice}"></span><input type="image"
																	src="../../img/add.png" th:src="@{/img/add.png}"
																	th:onclick="'javascript:chooseDrinks(\'' + ${restaurant.restaurantId} + '\', \'' + ${d.drinkId} + '\', \'' + ${d.drinkName} + '\', \'' + ${d.oldPrice} + '\', \'' + ${restaurant.deliveryPrice} + '\', \'' + ${restaurant.minOrder} + '\');'" />
															</div>
														</td>
													</tr>
												</tbody>
											</table>
										</td>
										<td></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="panel panel-default"
						style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">
						<div class="panel-heading"
							style="background-color: #DC143C; border-top-left-radius: 15px; border-top-right-radius: 15px;">
							<div class="panel-title"
								style="font-size: 30px; line-height: 32px; color: #FFF;">Giỏ
								hàng</div>
						</div>
						<div class="panel-body">
							<div id="order_no">
								<p>Đơn hàng trống. Thêm món bằng cách nhấp vào hóa đơn bên
									trái!</p>
								<p>
									Phí giao hàng: <span
										th:text="${restaurant.deliveryPrice} + 'đ'"></span>
								</p>
								<p>
									<strong>Tổng cộng:</strong> <span
										th:text="${restaurant.deliveryPrice} + 'đ'"
										style="font-size: 16; color: red;"></span>
								</p>
							</div>
							<div id="order_yes">
								<div class="row">
									<div class="col-md-12">
										<table class="table table-hover">
											<tbody id="order">
												<tr th:each="fo : ${lf}">
													<td th:text="${fo.amount}"></td>
													<td th:text="${fo.foodName}"></td>
													<td th:text="${fo.price} + 'đ'"></td>
													<td><img src="../../img/removebasket.gif"
														th:src="@{/img/removebasket.gif}"
														th:onclick="'javascript:removeFood(\'' + ${restaurant.restaurantId} + '\', \'' + ${fo.foodId} + '\');'" /></td>
												</tr>
												<tr th:each="dr : ${ld}">
													<td th:text="${dr.amount}"></td>
													<td th:text="${dr.drinkName}"></td>
													<td th:text="${dr.price} + 'đ'"></td>
													<td><img src="../../img/removebasket.gif"
														th:src="@{/img/removebasket.gif}"
														th:onclick="'javascript:removeDrink(\'' + ${restaurant.restaurantId} + '\', \'' + ${dr.drinkId} + '\');'" /></td>
												</tr>
												<tr>
													<td></td>
													<td>Phí giao hàng:</td>
													<td th:text="${restaurant.deliveryPrice} + 'đ'"></td>
													<td></td>
												</tr>
												<tr>
													<td></td>
													<td><strong>Tổng cộng:</strong></td>
													<td th:text="${count} + 'đ'" style="color: red;"></td>
													<td></td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="col-md-offset-2" id="btn_order">
										<a
											th:href="@{/client/count-money(restaurantId=${restaurant.restaurantId})}"><button
												type="button" class="btn btn-warning">Đặt hàng</button></a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title" style="border-bottom: 1px dashed black;">
								<p>
									<strong>Hình thức thanh toán</strong>
								</p>
								<img src="../../img/cash.gif" th:src="@{/img/cash.gif}" />
							</div>
							<div class="panel-body">
								<p>
									Phí giao hàng: <span
										th:text="${restaurant.deliveryPrice} + 'đ'"></span>
								</p>
								<p>
									Đặt tối thiểu: <span th:text="${restaurant.minOrder} + 'đ'"></span>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</article>
	</section>
	<footer class="container col-sm-12" style="margin-top: 50px;">
		<ol class="breadcrumb text-center">
			<li class="active"><p>
					@2015 orderonline.com - ĐẶT THỨC ĂN TRỰC TUYẾN, một phần của <strong>Takeaway.com</strong>
				</p></li>
		</ol>
	</footer>
	<input type="hidden" id="count" name="count" th:value="${count}" />
	<input type="hidden" id="minOrder" name="minOrder"
		th:value="${restaurant.minOrder}" />
	<input type="hidden" id="deliveryPrice" name="deliveryPrice"
		th:value="${restaurant.deliveryPrice}" />
	<script>
		showAndHidden();
	</script>
</body>
</html>